<template>
	<view class="box">
		<uNavbar title="转出福乐甄选" bgColor="transparent" @leftClick="leftClick"></uNavbar>

		<view class="main">
			<view class="top">
				<text>转出数量</text>
				<u-number-box style="margin-right: 50rpx;" v-model="fulnum" :min="0"   inputWidth="56"
					button-size="36" color="#333" bgColor="#fff" iconStyle="color: #ffffff"
					@change="change1"></u-number-box>
			</view>
			<!-- 	<view class="main_tit">
				挂售单价
			</view> -->
			<view class="main_wrap2">
				<text>转出账号</text>
				<input type="text" v-model.trim="account" placeholder="请输入账号" />
			</view>
			<view class="main_wrap2">
				<text>身份证号</text>
				<input type="text" v-model.trim="cardid" placeholder="请输入身份证号" />
			</view>
	
		
			<!-- 			<view class="main_wrap">
				<view class="moneycont">
					<view class="item" :class="{active:index==idx}" v-for="(item,index) in toggleList" :key="item.label" @click="sel(item,index)">
						<view class="num" >
							{{item}}元
						</view>
					</view>
	
				</view>
			</view> -->

			<!-- 			<view class="information entry" >
				<view class="zhengce flex_c" @click="toggleAgree">
					<image src="../../static/icon/i_checkbox.png" mode="" v-if="selectStatus"></image>
					<image src="../../static/icon/i_checkbox1.png" mode="" v-if="!selectStatus"></image>
				</view>
				<view class="information_box flex_dq">
					<text>阅读并且同意</text>
					<text class="underline" @click.stop="gotopuprule">《用户充值协议》</text>
				</view>
			</view> -->

		</view>

		<view class="btn" @click="submit">
			确定
		</view>

		<u-popup :show="showpass" mode="center" @close="showpass=false" closeable bgColor="transparent">
			<view class="pass_wrap">
				<view class="tit">
					请输入交易密码
				</view>
				<u-code-input disabledDot :adjustPosition="false" borderColor="#A68A64" focus class="code_input"
					v-model="password" mode="line" dot></u-code-input>
				<view class="other_btnwrap">
					<view class="other_btn1" @click="showpass=false,password=''">
						取消
					</view>
					<view class="other_btn2" @click="submittopup">
						确认
					</view>
				</view>
			</view>
		</u-popup>

		<!-- <u-picker :show="show" :columns="amount" @cancel="show=false" @confirm="confirm"></u-picker> -->
	</view>

</template>

<script>
	import {
		getuserinfo
	} from "../../api/index.js";

	import {
		fultransfer
	} from "../../api/wallet.js"
	import NP from 'number-precision'
	export default {
		data() {
			return {
				fulnum: 1,
				num: 0,
				cannum: 99,
				tipShow: false,
				showpass: false,
				password: "",
				account: "",
				current: 0,
				selcardval: null,
				show: false,
				phone: "",
				selectStatus: false,
				show1: false,
				validateCode: "",
				tips: '',
				fee: "",
				min: '',
				total: '',
				rule: "",
				ful: "",
				dj: "",
				fulz: "",
				min_ful: "",
				max_ful: "",
				fultotal: "",
				cardid:""
			}
		},
		onLoad() {
			this.getinfo()
			

		},
		computed: {
	
		},
		methods: {

			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			getnum(e) {
				// let fuldj = e.detail.value
				// if (fuldj > this.max_ful) {
				// 	this.num = this.max_ful
				// 	uni.$u.toast("最大价格为" + this.max_ful)
				// } else if (fuldj < this.min_ful) {
				// 	this.num = this.min_ful
				// 	uni.$u.toast("最小价格为" + this.min_ful)
				// }

				console.log(e)
			},

			change1(e) {
				console.log(e)
				// console.log(result)
				// this.num = this.dj * e.value
			},
			roundDown(num, digits) {
				var multiplier = Math.pow(10, digits);
				return Math.floor(num * multiplier) / multiplier;
			},
		
			getinfo() {
				getuserinfo().then(res => {
					this.ful = res.data.balance_ful
					this.fulz = Math.trunc(this.ful)
					console.log(this.phone)
				})
			},
			codeChange(text) {
				this.tips = text;
			},
		
			submit() {
				console.log(Number(this.fulnum))
				console.log(Number(this.ful))
				if(this.fulnum==0) {
					uni.$u.toast("请输入转出数量")
					return
				}
				if(Number(this.fulnum)>Number(this.ful)){
					uni.$u.toast("转出数量大于余额")
					return
				}
				if(this.account=='') {
					uni.$u.toast("请输入账号")
					return
				}
			
				if(!uni.$u.test.idCard(this.cardid)){
					uni.$u.toast("请输入正确的身份证号")
					return
				}
				this.showpass = true
			},
			submittopup() {
				if (this.password.length < 6) {
					uni.$u.toast("交易密码为6位");
				} else {
					fultransfer({
						account:this.account,
						code:this.cardid,
						number:this.fulnum,
						pay_password: this.password,
					}).then(res => {
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
							this.password = ""
							this.showpass = false
						}
						uni.$u.toast(res.msg)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'iconfont';
		src: url("~@/iconfont/almm.ttf");
	}

	.box {
		width: 750rpx;
		height: 100vh;
		background: #E0DDDA;
	}


	/deep/ .u-navbar__content__right__text {
		color: #FFFFFF;
	}

	.show_crad {
		width: 670rpx;
		margin: 0 auto;
		margin-top: 40rpx;

		.show_crad_txtone {
			width: 670rpx;
			display: flex;
			align-items: center;
			position: relative;

			.sel {
				width: 36rpx;
				height: 36rpx;
			}

			.payitem {
				width: 66rpx;
				height: 45rpx;
				margin-left: 10rpx;
			}

			>text {
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-left: 10rpx;
			}

			.iconright {
				position: absolute;
				right: 0rpx;
			}
		}

		.show_crad_name {
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.main {
		width: 670rpx;
		// height: 400rpx;
		background: #f2f2f2;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 0 auto;
		margin-top: 56rpx;

		.main_tit {
			padding-top: 34rpx;
			margin-left: 34rpx;
			margin-right: 34rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #333;
			padding-bottom: 20rpx;
			// border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
		}

		.main_wrap {
			width: 598rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
			display: flex;
			align-items: flex-end;

			>text {
				font-weight: 400;
				font-size: 72rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			.price_wrap {

				font-weight: 400;
				font-size: 108rpx;
				color: #333;
			}

			.ipt1 {
				font-weight: 400;
				font-size: 108rpx !important;
				color: #333 !important;
			}
		}

		.main_wrap3 {
			width: 598rpx;
			margin: 0 auto;
			margin-top: 50rpx;
			border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			>text {
				font-weight: 400;
				font-size: 32rpx;
				color: #333;
				margin-bottom: 16rpx;
			}

			>input {
				text-align: center;
				width: 200rpx;
				height: 60rpx;
				background: #B8A185;
				border-radius: 16rpx 16rpx 16rpx 16rpx;

			}

			/deep/.uni-input-input {
				color: #FFFFFF;
				font-weight: 300;
				font-size: 36rpx;
			}
		}

		.main_wrap2 {
			width: 598rpx;
			margin: 0 auto;
			padding-top: 36rpx;
			padding-bottom: 30rpx;
			// border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);

			.main_tit {
				padding-top: 34rpx;
				margin-left: 34rpx;
				margin-right: 34rpx;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				padding-bottom: 20rpx;
				// border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
			}

			.price_wrap {
				font-weight: 400;
				font-size: 108rpx;
				color: #FFFFFF;
			}

			>input {
				margin-left: 38rpx;
				font-weight: 400;
				font-size: 28rpx;
				// color: #fff;
			}

			/deep/.uni-input-input {
				// color: #FFFFFF;
				font-weight: 300;
				font-size: 36rpx;
			}
		}

		.main_bottom {
			width: 598rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			display: flex;
			padding-bottom: 20rpx;

			>text {
				font-size: 26rpx;
				color: #FFFFFF;
			}

			.main_bottom_txt {
				font-weight: 400;
				font-size: 26rpx;
				color: #FF2CDF;
				margin-left: 20rpx;
			}
		}
	}

	.tip {
		margin-top: 80rpx;
		width: 690rpx;
		margin: 0 auto;
		margin-top: 76rpx;

		.tit {
			font-weight: 400;
			font-size: 30rpx;
			color: #333;
		}

		>text {
			font-weight: 400;
			font-size: 24rpx;
			color: #A6A5AF;
		}
	}

	.btn {
		width: 690rpx;
		margin: 0 auto;
		height: 88rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		text-align: center;
		line-height: 88rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		margin-top: 94rpx;
	}

	.rule_content {
		padding-top: 30rpx;
		width: 750rpx;
		height: 650rpx;
		background-color: #28264A;
		border-radius: 10rpx;

		.rule_tit {
			font-weight: 500;
			font-size: 36rpx;
			color: #FFFFFF;
			text-align: center;
			display: flex;
			align-items: center;

			// justify-content: center;
			.icon {
				padding-right: 208rpx;
				margin-left: 48rpx;
			}
		}

		.max_wrap {
			width: 682rpx;
			height: 452rpx;
			background: #2F2D58;
			margin: 0 auto;
			margin-top: 40rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.cardlist {
			width: 602rpx;
			margin: 0 auto;
			height: 380rpx;
			overflow-y: auto;

			.card_item {
				display: flex;
				width: 602rpx !important;
				height: 94rpx;
				align-items: center;
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);

				.card_name {
					width: 500rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;

				}
			}
		}

		.cardlist_bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.addcard {
				display: flex;
				align-items: center;
				margin-left: 44rpx;

				>image {
					width: 34rpx;
					height: 34rpx;
					display: block;
					margin-top: 6rpx;
					margin-right: 10rpx;
				}

				>text {
					font-size: 32rpx;
					color: #FF2CDF;
					line-height: 52rpx;
				}
			}
		}
	}

	.uni-label-pointer {
		width: 602rpx;
	}

	/deep/ .uni-radio-group {
		overflow: auto;
	}

	.money_main {
		width: 750rpx;
		height: 800rpx;
		background: #2A2753;

		// border-radius: 20rpx 20rpx 20rpx 20rpx;
		.money_main_top {
			width: 750rpx;
			height: 100rpx;
			display: flex;
			align-items: center;

			.inco {
				margin-left: 50rpx;
			}

			>text {
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-left: 270rpx;
			}
		}

	}

	.moneycont {
		width: 750rpx;
		height: 200rpx;
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
		justify-content: flex-start;

		.item {
			margin-left: 25rpx;
			margin-bottom: 10rpx;
			width: 170rpx;
			height: 70rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.2);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.num {
				font-weight: 400;
				font-size: 30rpx;
				color: #fff;
			}
		}
	}

	.active {
		background: linear-gradient(274deg, #3040FC 1%, #FF2CDF 100%);
		border: none !important;

	}

	.information {
		width: 100%;
		margin: 150rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: center;
		visibility: inherit;
		text-align: center;
	}

	.information_box {
		display: flex;
		align-items: flex-start;
		margin-left: 10rpx;
	}

	.information_box>text {
		color: #A6A5AF;
		font-size: 24rpx;
	}

	.information_box>text:nth-child(2n) {
		color: #FF2CDF !important;
	}

	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
	}

	.pay_wrap {
		width: 750rpx;
		height: 600rpx;
		background: #2A2753;
		position: relative;

		.icon {
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}

		.num {
			padding-top: 68rpx;
			text-align: center;
			font-weight: 400;
			font-size: 72rpx;
			color: #FFFFFF;
		}

		.item_pay {
			width: 672rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			position: relative;
			margin-top: 30rpx;

			.logo {
				width: 70rpx;
				height: 38rpx;
			}

			>text {
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				margin-left: 10rpx;
			}

			.sel {
				width: 34rpx;
				height: 34rpx;
				position: absolute;
				right: 0rpx;
			}
		}
	}

	.selnum {
		width: 598rpx;
		height: 200rpx;

		.selnumitem {
			width: 170rpx;
			height: 70rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			border: 2rpx solid rgba(255, 255, 255, 0.2);
		}
	}

	.topupmoney {
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		margin-left: 40rpx;
		margin-top: 30rpx;

		>text {
			color: #FF2CDF;
			font-size: 44rpx;
		}
	}

	.information {
		width: 100%;
		margin: 40rpx auto 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		visibility: inherit;
	}

	.information_box {
		display: flex;
		align-items: flex-start;
		margin-left: 10rpx;
	}

	.information_box>text {
		color: #A6A5AF;
		font-size: 24rpx;
	}

	.information_box>text:nth-child(2n) {
		color: #FF2CDF !important;
	}

	.zhengce>image {
		width: 32rpx;
		height: 32rpx;
	}

	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding-top: 30rpx;
	}

	.prompt>text {
		margin-top: 40rpx;
	}

	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
	}
	.pass_wrap {
		width: 602rpx;
		height: 406rpx;
		background: #E0DDDA;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
		z-index: 998;
	
		.tit {
			width: 602rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333;
			padding-top: 50rpx;
			margin-bottom: 70rpx;
		}
	
		.code_input {
			margin: 0 auto;
		}
	
		.other_btnwrap {
			width: 522rpx;
			height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 50rpx;
	
			.other_btn1 {
				width: 220rpx;
				height: 72rpx;
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				border: 2rpx solid #A68A64;
				font-size: 28rpx;
				color: #A68A64;
				text-align: center;
				line-height: 72rpx;
			}
	
			.other_btn2 {
				width: 220rpx;
				height: 72rpx;
				background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
				border-radius: 280rpx 280rpx 280rpx 280rpx;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 72rpx;
			}
		}
	
		.u-code-input {
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		/deep/.u-code-input__item{
			width: 30px !important;
			height: 30px !important;
			margin-right: 14px !important;
		}
		/deep/.u-code-input__item>text {
			color: #fff !important;
		}
	}

	.binding {
		width: 90%;
		margin: 0 auto;
		padding: 18rpx 0;
		// border-radius: 60rpx;
		// background: #2B2749;
		border-bottom: 1rpx solid #5a5a5a70;

		>text {
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			margin-right: 68rpx;
		}

		/deep/.uni-input-wrapper {
			color: #A6A5AF !important;
		}

		/deep/.uni-input-input {
			color: #FFFFFF;
			font-weight: 300;
			font-size: 36rpx;
		}

	}

	/deep/.u-button--success {
		background: none !important;
		border: none !important;
		color: #FF2CDF !important;
	}



	/deep/.u-border {
		border: none;
		// border-bottom: 2rpx solid rgba(255, 44, 223, 0.5) !important;
	}



	/deep/.uni-input-placeholder {
		color: #A6A5AF !important;
	}

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 46rpx;
		margin-left: 32rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #333;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #5a5a5a70;
	}

	/deep/.u-number-box__minus {
		background: #AB8E68 !important;
	}

	/deep/.u-number-box__plus {
		background: #AB8E68 !important;
	}
	.main_wrap2 {
		width: 598rpx;
		margin: 0 auto;
		padding-top: 36rpx;
		padding-bottom: 30rpx;
		// border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
	
		>text {
			font-weight: 400;
			font-size: 32rpx;
			color: #333;
			margin-right: 14rpx;
			// margin-bottom: 16rpx;
		}
	
		.price_wrap {
			font-weight: 400;
			font-size: 108rpx;
			color: #333;
		}
	
		>input {
			margin-left: 38rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666;
		}
		/deep/.uni-input-input {
			color: #333;
			font-weight: 300;
			font-size: 36rpx;
		}
	}
</style>